<template>
  <el-container>
    <el-main>
      <el-table
        id="exportTab"
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :current-page.sync="currentPage"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!-- @selection-change="handleSelectionChange" -->
        <el-table-column type="index" width="80"> </el-table-column>
        <el-table-column prop="id" label="ID" width="120"> </el-table-column>
        <el-table-column prop="username" label="username" width="160">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.username }}</div>
            <div v-else>
              <el-input v-model="scope.row.username"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mail" label="mail" width="200">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.mail }}</div>
            <div v-else>
              <el-input v-model="scope.row.mail"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phonenumber" label="phonenumber" width="220">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.phonenumber }}</div>
            <div v-else>
              <el-input v-model="scope.row.phonenumber"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="status" width="200">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.status }}</div>
            <div v-else>
              <el-input v-model="scope.row.status"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot="header" slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="
                iconFormVisible = true;
                scope = scope;
              "
              >增加</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >{{ scope.row.isEdit ? "完成" : "修改" }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-row :gutter="10">
        <el-col :span="18">
          <div style="text-align: center; margin-top: 30px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="total,sizes,prev, pager, next,jumper"
              :total="total"
              @current-change="current_change"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="text-align: center; margin-top: 30px">
            <ExportExcel :id="'exportTab'" :name="'导出Table'"></ExportExcel>
          </div>
        </el-col>
      </el-row>
    </el-footer>
    <!-- 弹窗 -->
    <el-dialog title="新增" width="40%" :visible.sync="iconFormVisible">
      <el-form label-width="35%" :model="addInfo" class="demo-form-inline">
        <!-- <el-form-item label="ID">
          <el-input v-model="addInfo.id" placeholder="ID(要求为数字，请勿输入重复ID)"></el-input>
        </el-form-item> -->
        <el-form-item label="用户名">
          <el-input
            v-model="addInfo.username"
            placeholder="username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="addInfo.password"
            placeholder="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addInfo.mail" placeholder="mail"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="addInfo.phonenumber"
            placeholder="phonenumber"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="iconFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import ExportExcel from "../../components/ExportExcel.vue";
export default {
  components: {
    ExportExcel,
  },
  data() {
    return {
      iconFormVisible: false,
      tableData: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      addInfo: {},
    };
  },
  mounted() {
    this.show();
  },

  methods: {
    add() {
      console.log(this.addInfo);
      var formdata = new FormData();
      formdata.append("username", this.addInfo.username);
      formdata.append("password", this.addInfo.password);
      formdata.append("mail", this.addInfo.mail);
      formdata.append("phonenumber", this.addInfo.phonenumber);
      this.$axios.post("/api/user/regist", formdata).then(() => {
        this.iconFormVisible = false;
        this.$message({
          type: "success",
          message: "添加成功!请刷新页面",
        });
      });
    },
    handleDelete(index, row) {
      console.log("row:" + row.username);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/api/user/delete", {
              params: {
                username: row.username,
              },
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!请刷新页面",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleEdit(index, row) {
      if (row.isEdit) {
        //这是点击完成的时候
        this.$delete(row, "isEdit");
        this.$axios.get("/api/user/alluser", {
          params: {
            methodName: "3",
            id: row.id,
            age: row.age,
            major: row.major,
            gender: row.gender,
            name: row.name,
          },
        });
      } else {
        //这是点击修改按钮的时候
        this.$set(row, "isEdit", true);
      }
    },
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    show() {
      var that = this;
      // this.$axios.get('/api/user/alluser',).then(function(response){
      //   var res=eval(response.data);
      //   that.tableData=res;
      //   that.total=res.length;
      //   console.log(that.tableData)
      // }).catch(function(){
      //   console.log(error);
      // })
      that.tableData = [
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
      ];
      that.total = that.tableData.length;
    },
  },
};
</script>

<style>
</style>